<template>
    <div>
        <el-dialog width="99%" fullscreen :close-on-click-modal="false" :title="'手动绑定'" draggable v-model="state.visible"
            ref="dialogRef">
            <el-alert title="" type="warning" class="mb20" :closable="false">
                <p> 1、系统会将所选ERP入库单与指定的三方仓单号绑定，并自动获取三方仓单据状态；</p>
                <p> 2、待绑定ERP入库单的SKU和数量，必须和指定三方仓入库单的SKU和数量完全一致；</p>
                <p> 3、若选择了多个ERP入库单，将以合并后的SKU和数量与三方仓入库单绑定；三方仓后续返回入库数量时，系统将按原ERP入库单的顺序依次分配入库数量，依次完结入库单。</p>
                <p> 4、绑定成功后不可解绑或换绑，请谨慎操作。</p>
            </el-alert>
            <el-form label-width="140" label-suffix="：" :model="state.submitData" :rules="rules" ref="formRef">
                <div class="basic-info-head">基本信息</div>

                <el-row>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="三方仓单号" prop="tripartiteOrderCode">
                            <el-input v-model="state.submitData.tripartiteOrderCode" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="7" class="mb20">
                        <el-form-item label="收货仓">
                            {{ state.whNameTo }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" class="mb20">
                        <el-form-item label="出库单号">
                            {{ state.inboundOrderCodes }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="basic-info-head mt20">产品信息</div>

            <el-table :data="state.mergeList" row-key="id" border default-expand-all>
                <el-table-column v-for="col in columnsData" :label="col.name" :prop="col.prop || 'picUrl'"
                    :fixed="col.fixed ? col.fixed : false" :min-width="col.width ? col.width : '140'"
                    :sortable="col.sortable" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click="state.visible = false">取消</el-button>
                <el-button type="primary" class="ml10" @click="confirm">确认绑定</el-button>
            </template>
        </el-dialog>
        <SkuDetailDialog ref="SkuDetailDialogRef" />
    </div>
</template>

<script lang="ts" name="apportionmentDialog" setup>
import request from '/@/utils/request';

const emit = defineEmits(['change'])
const dialogRef = ref()
const SkuDetailDialogRef = ref()

const rules = ref({
    tripartiteOrderCode: [{ required: true, message: '三方仓单号必填', trigger: 'blur' }],
});


const props = defineProps({
    apportionIdList: {
        type: Array,
        default: []
    }
})

const columnsData = [
    {
        name: '（ERP）三方仓入库单号',
        isShow: false,
        prop: 'inboundOrderCode',
        width: '180',
    },
    {
        name: 'sku',
        isShow: true,
        prop: 'skuCode',
        width: '180',
    },
    {
        name: '品名',
        isShow: false,
        prop: 'skuName',
        width: '180',
    },
    {
        name: '数量',
        prop: 'deliveryNum',
        isShow: true,
        defaultChecked: true,
    },

]



const state = reactive({
    visible: false,
    mergeList: [],
    submitData: {},
    tranList: [],
    inboundOrderCodes: '',
    whNameTo: ''
})


const mergeOrderList = (data?: object) => {
    return request({
        url: '/wms/tripartiteInboundOrder/bindInboundOrderCode',
        method: 'POST',
        data
    });
}

import { ElMessage } from 'element-plus';

const formRef = ref()

const confirm = async () => {
    const valid = await formRef.value.validate().catch(() => { });

    if (!valid) return false;

    let params = state.submitData
    mergeOrderList(params).then(res => {
        if (res.code == 0) {
            ElMessage({
                message: res.msg || '已成功绑定！',
                type: 'success',
            });
            emit('change')
            state.visible = false
        }
    })
}

onMounted(async () => {
});

// 打开弹窗
const openDialog = async (data) => {
    state.visible = true
    state.inboundOrderCodes = data.inboundOrderCodes
    state.whNameTo = data.whNameTo
    state.mergeList = data.rows
    state.submitData.idList = data.idList
};


defineExpose({
    openDialog
})

</script>

<style lang="scss" scoped>
.basic-info-head {
    position: relative;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: #0b1019;
    padding-left: 10px;
    margin-bottom: 20px;
    display: flex;

    &:before {
        content: ' ';
        display: inline-block;
        position: absolute;
        top: 5px;
        left: 0;
        height: 14px;
        width: 2px;
        background: #005bf5;
    }
}

.footerHandle {
    display: flex;
    flex-direction: row-reverse;
}
</style>